<template>
  <!-- 使用 MainLayout 统一布局 -->
  <MainLayout>
    <!-- 首页主容器 -->
    <div>
      <h1>欢迎来到企业官网</h1>
      <el-row :gutter="20" style="margin-bottom: 30px;">
        <el-col :span="12">
          <el-card>
            <h2>公司简介</h2>
            <p>我们致力于为客户提供优质的产品与服务，助力企业数字化转型。</p>
            <el-button type="primary" @click="goTo('/about')">了解更多</el-button>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <h2>联系我们</h2>
            <p>有任何需求或建议，欢迎随时联系我们。</p>
            <el-button type="success" @click="goTo('/contact')">在线留言</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <h3>产品与服务</h3>
            <el-button type="primary" @click="goTo('/products')">查看产品</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <h3>新闻动态</h3>
            <el-button type="primary" @click="goTo('/news')">查看新闻</el-button>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <h3>客户案例</h3>
            <el-button type="primary" @click="goTo('/cases')">查看案例</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </MainLayout>
</template>

<script setup>
// 引入 MainLayout
import MainLayout from '~/components/MainLayout.vue'
// 引入 useRouter 用于页面跳转
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转函数
function goTo(path) {
  router.push(path)
}
</script>

<style scoped>
h1 {
  margin-bottom: 30px;
}
.el-card {
  min-height: 120px;
}
</style> 